<template>
  <div class="rank">
   
    <div class="list" v-for="rank in topListData" :key="rank.title">
      <h3>{{rank.title}}</h3>
      <div class="list-item" v-for="item in rank.list" :key="item.topId"  @click="selectRankList(item)">
        <div class="item">
         <span>{{item.label}}</span>
        <ul>
          <li v-for="(playItem,i) in item.song" :key="item.topId+playItem.songId"   @click="selectPlatList(item)">
          <span>{{i+1}}.{{playItem.title}}--{{playItem.singerName}}</span>
          </li>
        </ul>
        </div>
      <div class="item">
        <img :src="item.picUrl" alt="">
      </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      topListData:[]
    }
  },
  created(){
    this.getTopList()
  },
  methods:{
    getTopList(){
     axios.get("/jsososo/top/category?showDetail=1")
      .then(res => {
        console.log(res.data)
        this.topListData=res.data.data
      })
      .catch(err => {
        console.error(err); 
      })
    },
         selectPlatList(item){
             const id=item.content_id
             this.$router.push({
            path:`/dian/${id}`
        })
    },
     selectRankList(item){
      const id=item.topId;
      this.$router.push({path: `/dian/${id}` })
    }
  }
}
</script>
<style scoped>
.list{
  background-color: #eeeeee;
}
.list-item{
  display: flex;
  margin: 10px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;

}
.item:nth-of-type(1){
  width: 60%;
}
.item:nth-of-type(2){
  width: 40%;
  text-align: right;
}
.item{
  text-align: left;
}
.item>img{
  margin-top:10px ;
  width: 80%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.item>span{
  font-size: 18px;
  font-weight: 800;
}

</style>>
